<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <style>
        #search {
          height: 100%;
          text-align: center; 
          padding: 1rem 0;
        }
        #main {
          width:80%;
          margin: 0 auto;
        }
        #more {
          text-align: center;
        }
        .h {
          display: none;
        }
        .list-div {
        }
        .list-div>img {
          width:100%;
        }
        .list-div>img:hover {
          transform: scale(0.9);
          cursor: pointer;
        }
        .list-div>p {
          text-align: center;
        }

        .detail-title {
          font-size: 2rem;
        }
        .detail-info {
        }
        .detail-image {
          width:100%;
        }
      </style>
  </head>
<body>
<div id="search">
  <div class="search-wrapper">
      <input type="text" id="search-box">
      <button id="search-btn" onclick="search(document.getElementById('search-box').value)">搜</button>
  </div>
</div>
<div id="nav" class="h">
  <button onclick="location.reload()">←返回首页</button>
</div>
<div id="main">loading...</div>
<div id="more">
    <button onclick="loadMore()">↓加载更多</button>
</div>
<div id="detail">
</div>

<script>
window.pagesize = 2; // 每页记录条数


window.dataSource = [];
window.searchData = [];
window.numOffset = 0; // 偏移记录条数
const renderData = function (data, appendMode) {
  if (appendMode === undefined) {
    window.numOffset = 0;
    document.getElementById('main').innerHTML = '';
  }
  document.getElementById('main').innerHTML += data.map((item) => {
    return `<div class="list-div">
      <img src="${item.src}" class="link" data-id="${item.id}" data-title="${item.title}" data-info="${item.info}"/>
      <p>${item.title}</p>
      </div>`;
  }, data).join('');
}

const loadMore = function () {
  dataSrc = window.searchData.length > 0 ? window.searchData : window.dataSource;
  data = dataSrc.slice(window.numOffset, window.pagesize + window.numOffset)
  // debugger
  renderData(data, true);
  window.numOffset && setTimeout(() => {
    document.documentElement.scrollTop = document.body.scrollHeight
  }, 100)
  window.numOffset = window.pagesize + window.numOffset
}

const renderDetail = function (data) {
  let {title, url, info} = data;
  document.getElementById('main').setAttribute('class', 'h');
  document.getElementById('search').setAttribute('class', 'h');
  document.getElementById('more').setAttribute('class', 'h');
  document.getElementById('nav').setAttribute('class', '');
  document.getElementById('detail').innerHTML = `<div class="detail-title">${title}</div>
  <div class="detail-info">${info}</div>
  <img class="detail-image" src="${url}"/>
  `;
}

window["jsonp_callback"] = function (data) {
  window.dataSource = data;
  renderData([])
  loadMore()
  // renderData(data)
}

function search(kw) {
  window.searchData = [];
  window.numOffset = 0;
  window.dataSource.forEach((item) => {
    if (item.title.indexOf(kw) !== -1) {
      window.searchData.push(item);
    }
  });
  renderData([])
  loadMore()
  // renderData(window.searchData)
}

function jsonp(id, url)
{
  if (document.getElementById(id) !== undefined) {
    let obj = document.createElement('script');
    obj.src = url;
    obj.id = id;
    document.head.appendChild(obj);
  }
}

jsonp('dataSource', 'dataSource.js');


document.onclick = function (e) {
  console.log(e.target);
  if (e.target.getAttribute('class') == 'link') {
    console.log(e.target.getAttribute('data-info'))
    renderDetail({
      title: e.target.getAttribute('data-title'),
      url: e.target.getAttribute('src'),
      info: e.target.getAttribute('data-info'),
    });
  }
}

</script>

</body>
</html>